<nav class="off-screen-navigation" id="off-screen">
  <div class="off-screen-level">
    <div class="off-screen-header">
      <h3 class="header">Furatto</h3>
    </div>
    <ul>
      <!--level one-->
      <li>
        <a href="#">Setup</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Setup</h3>
          </div>
          <!--back navigation link-->
          <a class="navigation-back" href="#">back</a>
          <!--back navigation link-->
          <ul>
            <li><a href="/furatto/docs">Getting Started</a></li>
            <li><a href="/furatto/whats_included">What's included?</a></li>
            <li><a href="/furatto/basic_setup">Basic Setup</a></li>
            <li><a href="/furatto/browser_support">Browser Support</a></li>
            <li><a href="/furatto/using_rails">Using Rails</a></li>
            <li><a href="/furatto/examples">Apps Examples</a></li>
          </ul>
        </div>
      </li>      
      <!--level one-->
      <li>
        <a href="#">Skeleton</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Skeleton</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="/furatto/overview">Overview</a></li>
            <li><a href="/furatto/media_queries">Media queries</a></li>
            <li><a href="/furatto/grid">Grid</a></li>
            <li><a href="/furatto/responsive_utilities">Responsive Utilities</a></li>
            <li><a href="/furatto/utility_classes">Utility classes</a></li>
            <li><a href="/furatto/mixins">Mixins</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Navigation</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Navigation</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="/furatto/navigation_bar">Navigation bar <span class="label round warning">JS</span></a></li>
            <li><a href="/furatto/off_screen">Off Screen <span class="label round warning">JS</span></a></li>
            <li><a href="/furatto/side_navigation">Side Navigation</a></li>
            <li><a href="/furatto/inline_navigation">Inline Navigation</a></li>
            <li><a href="/furatto/tab_navigation">Tab Navigation <span class="label round warning">JS</span></a></li>
            <li><a href="/furatto/pagination">Pagination</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Plugins</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Plugins</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="/furatto/suraido">Suraido <span class="label round warning">JS</span></a></li>
            <li><a href="/furatto/toolbars">Toolbars <span class="label round warning">JS</span></a></li>
            <li><a href="/furatto/modal">Modal <span class="label round warning">JS</span></a></li>
            <li><a href="/furatto/tooltips">Tooltips <span class="label round warning">JS</span></a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Buttons</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Buttons</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="/furatto/buttons">Buttons</a></li>
            <li><a href="/furatto/group_buttons">Group buttons</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Content</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Content</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="/furatto/typography">Typography</a></li>
            <li><a href="/furatto/forms">Forms</a></li>
            <li><a href="/furatto/images">Images</a></li>
            <li><a href="/furatto/tables">Tables</a></li>
            <li><a href="/furatto/labels">Labels</a></li>
            <li><a href="/furatto/alerts">Alerts <span class="label round warning">JS</span></a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Old Docs</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Old Docs</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="http://icalialabs.github.io/furatto/v1">Version 1</a></li>
            <li><a href="http://icalialabs.github.io/furatto/v2">Version 2</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Get Involved</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Get Involved</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="https://github.com/IcaliaLabs/furatto/blob/master/CHANGELOG.md">Changelog</a></li>
            <li><a href="https://github.com/IcaliaLabs/furatto">Github</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">Looking for a job</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Looking for a job</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="mailto:weare@icalialabs.com">Email us</a></li>
            <li><a href="https://twitter.com/icalialabs">Shout us at tweet</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

